<template>
  <div class="h-panel">
    <PaasIndexBar></PaasIndexBar>
    <div class="h-panel-bar">
      <Row :space="10">
        <Cell :width="8">
          <PaasPageSelect label="项目名称" prop="projectName" v-model="projectName" @change="projectChange" url="/srproject/select"></PaasPageSelect>
        </Cell>
        <Cell :width="8">
          <PaasPageSelect label="库表名称" prop="tableName" :of="projectName" v-model="tableName" url="/srmodular/select" @change="loadData"></PaasPageSelect>
        </Cell>
      </Row>
      <Row :space="10">
        <Cell :width="3">
          <b>字段名称</b>
        </Cell>
        <Cell :width="3">
          <b>数据类型</b>
        </Cell>
        <Cell :width="3">
          <b>中文描述</b>
        </Cell>
        <Cell :width="1">
          <b>主键</b>
        </Cell>
        <Cell :width="1">
          <b>非空</b>
        </Cell>
        <Cell :width="1">
          <b>列表</b>
        </Cell>
        <Cell :width="1">
          <b>编辑</b>
        </Cell>
        <Cell :width="1">
          <b>查询</b>
        </Cell>
        <Cell :width="2">
          <b>组件类型</b>
        </Cell>
        <Cell>
          <b>组件地址</b>
        </Cell>
      </Row>
    </div>
    <div class="h-panel-body bottom-line">
      <Row :space="5" :key="i" v-for="(item, i) in datas">
        <input type="text" v-model="item.id" v-show="false" />
        <Cell :width="3">
          <input type="text" placeholder="字段" v-model="item.enName" />
        </Cell>
        <Cell :width="3">
          <AutoComplete :option="option" :datas="dataType" v-model="item.dataType" type="title" :must-match="false" @change="(d) => {item.dataType = d.label;}"></AutoComplete>
        </Cell>
        <Cell :width="3">
          <input type="text" placeholder="描述" v-model="item.cnName" />
        </Cell>
        <Cell :width="1">
          <Checkbox v-model="item.isPk" trueValue="1" falseValue="0"></Checkbox>
        </Cell>
        <Cell :width="1">
          <Checkbox v-model="item.isNull" trueValue="1" falseValue="0"></Checkbox>
        </Cell>
        <Cell :width="1">
          <Checkbox v-model="item.showTable" trueValue="1" falseValue="0"></Checkbox>
        </Cell>
        <Cell :width="1">
          <Checkbox v-model="item.showHandle" trueValue="1" falseValue="0"></Checkbox>
        </Cell>
        <Cell :width="1">
          <Checkbox v-model="item.showQuery" trueValue="1" falseValue="0"></Checkbox>
        </Cell>
        <Cell :width="2">
          <Select placeholder="组件类型" v-model="item.widgetType" :datas="widgetTypeData"></Select>
        </Cell>
        <Cell>
          <input type="text" placeholder="地址" v-model="item.selectUrl" url="/sysparams/select/SelectUrl" />
          <Poptip content="确认删除?" @confirm="del(item)">
            <button class="h-btn h-btn-text-primary h-btn-no-border">
              <i class="h-icon-trash"></i>
            </button>
          </Poptip>
        </Cell>
      </Row>
    </div>
    <div class="h-panel-bar">
      <Button icon="h-icon-plus" @click="addColumn" v-if="!!projectName && !!tableName">新建</Button>
      <Button color="primary" icon="h-icon-completed" @click="confirm" v-if="!!projectName && !!tableName">保存</Button>
    </div>
  </div>
</template>

<script>
import PaasPageSelect from "@/components/PaasPageSelect";
import PaasSelect from "@/components/PaasSelect";

export default {
  components: {
    PaasSelect,
    PaasPageSelect,
  },
  mounted() { },
  data() {
    return {
      option: {
        keyName: "value",
        titleName: "label",
      },
      projectName: "",
      tableName: "",
      dataType: [],
      datas: [],
      widgetTypeData: [],
      columns: [
        { title: "描述", prop: "cnName" },
        {
          title: "数据类型",
          prop: "dataType",
          render: (d) => this.StaticFunc.reader(this, "DataType", d.dataType),
        },
        { title: "字段", prop: "enName" },
        { title: "非空", prop: "isNull" },
        { title: "项目名称", prop: "projectName" },
        { title: "地址", prop: "selectUrl" },
        { title: "库表名称", prop: "tableName" },
        {
          title: "组件类型",
          prop: "widgetType",
          render: this.renderWidgetType,
        },
      ],
    };
  },
  methods: {
    loadData() {
      if (!this.projectName || !this.tableName) {
        return;
      }
      this.$store
        .dispatch("loadData", {
          queryData: {
            projectName: this.projectName,
            tableName: this.tableName,
          },
          page: { current: 1, size: 10000 },
        })
        .then((data) => {
          this.datas = data.data.rows;
        });
    },
    addColumn() {
      this.datas.push({
        cnName: "",
        dataType: "",
        enName: "",
        id: "",
        isAuto: "",
        isNull: "",
        isPk: "",
        projectName: "",
        selectUrl: "",
        showHandle: "",
        showQuery: "",
        showTable: "",
        tableName: "",
        widgetType: "",
      });
    },
    confirm() {
      this.$axios
        .put(this.$store.state.menus.current + "/edit", {
          ...{ projectName: this.projectName, tableName: this.tableName },
          ...{ datas: this.datas },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.loadData();
          }
          this.$Message.info(res.data.msg);
        });
    },
    del(data) {
      this.$axios
        .delete(this.$store.state.menus.current + "/" + data.id)
        .then((res) => {
          let data = res.data;
          if (res.data.code == 200) {
            this.loadData();
          }
        });
    },
    projectChange(data) {
      this.$axios.get("/srproject/" + data.value).then((res) => {
        if (res.data.dbType == "oracle") {
          this.$store.dispatch("getParams", "OracleDataType").then((data) => {
            this.dataType = data;
          });
        } else {
          this.$store.dispatch("getParams", "MysqlDataType").then((data) => {
            this.dataType = new Array();
            data.forEach(item => {
              this.dataType.push({ value: item.value, label: item.label })
            })
            // this.dataType = data;
          });
        }
      });

      this.$axios.post("/sitemplates/select", { projectId: this.projectName }).then((res) => {
        this.widgetTypeData = res.data.data.rows;
      });
    },
  },
};
</script>
